<template>
	<view>
		<view v-if="showInputPwd">
			<view class="pwd-bg"  @click="close" ></view>
			<view class="pay-password" >
				<view class="pwd-box" :class="{'pb':showInputPwd && !hideInputPwd,'hb':hideInputPwd}">
					<view class="pwd-title">
						<text class="pwd-title-left" @click="close">{{i18n.cancel}}</text>
						<view class="pwd-title-center">{{i18n.verification}}</view>
						<view class="pwd-title-right"></view>
					</view>
					<view class="pay-tips">{{i18n.enterPass}}</view>
					<u-message-input :value="value" focus="var(--theme-color)" :dot-fill="true" :focus="false" :maxlength="6" :disabled-keyboard="true"></u-message-input>
					<view class="pwd-link">
						<view @click="goto">{{i18n.forgetPass}}？</view>
					</view>
					<view class="pwd-keys">
						<view class="li" @click="keysOn(item)" v-for="item in keys" :key="item">{{item}}</view>
						<view class="no-bg li"></view>
						<view class="li" @click="keysOn(0)">0</view>
						<view class="no-bg li iconfont" @click="keysOn('del')">&#xe609;</view>
					</view>
					<view class="pwd-box-tip">
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hideInputPwd:false,
				showInputPwd: false,
				keys: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
				value:''
			};
		},
		computed: {
		    i18n() {
		    	return this.$t('components');
		    }
		},
		methods: {
			close(){
				this.hideInputPwd = true
				setTimeout(()=> {
					this.showInputPwd = false
					this.hideInputPwd = false
				}, 400)
			},
			setDisplay(flag) {
				if (flag) {
					this.value = ''
				}
				this.showInputPwd = flag
			},
			keysOn(val) {
				if (val != 'del') {
					if (this.value.length < 6) {
						this.value += val;
						if (this.value.length == 6) {
							let pwd = this.value;
							uni.showToast({
								title: this.value,
								icon: 'none'
							})
							this.$emit('complete', pwd)
						}
					}
				} else {
					if(this.value.length) this.value = this.value.substr(0, this.value.length - 1);
				}
			},
			goto() {
				uni.navigateTo({
					url: '/pages/user/settingMoneyPwd'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	@fontsize: 28upx;

	.pwd-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .5);
		z-index: 980
	}
    .pay-tips{
    	font-size:28upx;
    	text-align: center;
    	padding:40upx 0 ;
    }
	.pwd-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #fff;
		color: #263238;
		z-index: 990;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		.h1 {
			text-align: center;
			font-size: @fontsize + 5;
			padding: 22px;
			font-weight: bold;
		}
		.pwd-link {
			text-align: center;
			color: var(--theme-color);
			font-size: @fontsize;
			padding:40upx 0;
		}

		.pwd-keys {
			width: 100%;
			background: #d1d5db;
			height: 225px;
			position: absolute;
			bottom: 0;
			padding-top: 5px;
			.li {
				float: left;
				text-align: center;
				margin: 0 0 5px 5px;
				margin-top: 0;
				width: calc((100% - 20px) / 3);
				height: 50px;
				line-height: 46px;
				background: #fff;
				border-radius: 5px;
				border-bottom: 1px #999 solid;
				font-size: @fontsize + 9;
			}

			.li.no-bg {
				background: none;
				border: none;
			}

			.li:active {
				background: #f0f0f0;
			}
		}
	}

	.pwd-box-tip {
		display: flex;
		height: 225px;
		align-items: center;
		justify-content: center;
		padding: 15px;
		color: #909090;
		text-align: center;
		font-size: 16px;
	}

	.pwd-title {
		display: flex;
		justify-content: space-between;
		height: 100upx;
		align-items: center;
		margin-bottom: 40upx;
		border-bottom: 1px #F5F8FF solid;
	}

	.pwd-title-right,
	.pwd-title-left {
		font-size: 28upx;
		color: #9DACB9;
		line-height: 100upx;
		height: 100upx;
		width: 160upx;
		text-align: center;
	}

	.pwd-title-center {
		flex: 1;
		text-align: center;
		font-size: 32upx;
		color: #263238;
		line-height: 100upx;
	}
	.pb {
		animation: showbottom 0.4s;
	}
	.hb {
		animation: hidebottom 0.4s;
	}
    @keyframes showbottom {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}
	@keyframes hidebottom {
		from {
			transform: translateY(0);
		}
	
		to {
			transform: translateY(100%);
		}
	}
</style>
